<template>
	<view>
		<search-Input></search-Input>
        <tabs :tabs="tabs" @tabsItemChange="hendleTabsItemChange">
            <block v-if="tabs[0].isActive">
                <view class="first_tab">
                    <navigator class="goods_item"
                    v-for="item in goodsList"
                    :key="item.goods_id"
                    :url="`/pages/goods_detail/main?goods_id={{item.goods_id}}`"
                    >
                        <!--左侧图片容器-->
                        <view class="goods_img_wrap">
                            <image mode="widthFix" :src="item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'"></image>
                        </view>
                        <!--右侧商品容器-->
                        <view class="goods_info_wrap">
                            <view class="goods_name">{{item.goods_name}}</view>
                            <view class="goods_price">￥{{item.goods_price}}</view>
                        </view>
                    </navigator>
                </view>
            </block>
            <block v-else-if="tabs[1].isActive">1</block>
            <block v-else-if="tabs[2].isActive">2</block>
        </tabs>
	</view>
</template>

<script>
import searchInput from "@/components/searchInput"
import Tabs from "@/components/Tabs"
	export default {
        components:{
            searchInput,
            Tabs
        },
        data(){
            return{
                tabs:[
                    {
                        id:0,
                        value:"综合",
                        isActive:true
                    },
                    {
                        id:1,
                        value:"销量",
                        isActive:false
                    },
                    {
                        id:2,  
                        value:"价格",
                        isActive:false
                    }
                ],
                goodsList:[],
                //接口要的参数
                QueryParams:{
                    query:'',
                    cid:'',
                    pagenum:1,
                    pagesize:10
                },
                totalPages:1,

            }
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
            //上个页面传递过来cid参数
            this.QueryParams.cid = options.cid||'';
            this.QueryParams.query = options.query||'';
            this.getGoodsList();
        },
        methods:{
            //获取商品列表数据
            getGoodsList(){
                this.request({
                    url:"https://api-hmugo-web.itheima.net/api/public/v1/goods/search",
                    data:this.QueryParams
                    })
                    .then(res=>{
                        //获取总条数
                        // console.log(res);
                        const total = res.total;
                        
                        //计算总页数
                        this.totalPages = Math.ceil(total / this.QueryParams.pagesize);
                        this.goodsList=[...this.goodsList,...res.goods]

                        uni.stopPullDownRefresh();
                    })
                
            },

            //标题点击事件 从子组件传递过来
            hendleTabsItemChange(e){
                //获取索引
                const {index} = e;
                //修改源数据 并赋值
                let tabs = this.tabs;

                tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
                
                this.tabs = tabs;
                
            },
            //页面上滑滚动条触发事件
            onReachBottom(){
                if(this.QueryParams.pagenum>=this.totalPages){
                    uni.showToast({
                    title: '已经尽力了喔~~',
                    icon:'none'
                    });
                }else{
                    this.QueryParams.pagenum++;
                    this.getGoodsList();
                }
            },
            //下拉刷新事件
            onPullDownRefresh(){
                //重置数组 
                this.goodsList = [];    
                //重置页码
                this.QueryParams.pagenum = 1;
                //发送请求
                this.getGoodsList();
            }
        }
		
	}
</script>

<style lang="scss">
	.first_tab{
        .goods_item{
            display: flex;
            border-bottom: 1px solid #ccc;
            .goods_img_wrap{
                flex: 2;
                display: flex;
                justify-content: center;
                align-items: center;
                image{
                    width: 70%;
                }
            }
            .goods_info_wrap{
                flex: 3;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .goods_name{
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .goods_price{
                    color:#e64340;
                    font-size: 32rpx;
                }
            }
        }
    }
</style>